<!-- 商品编辑页面 -->
<template>
	<view class="productEdit">
		<view class="productEdit_form">
			<view class="productEdit_form_item flex flex-jc-sb flex-ai-c">
				<view>
					<text>商品名称</text>
				</view>
				<view>
					<u-input :disabled="true" input-align="right" :border="false" v-model="selectedList.goods_title"
						placeholder="请输入"></u-input>
				</view>
			</view>
			<view class="productEdit_form_item flex flex-jc-sb flex-ai-c">
				<view>
					<text>商品分类</text>
				</view>
				 <!-- @click="typeShow = true" -->
				<view>
					<text>{{selectedList.category_name}}</text>
					<!-- <u-icon name="arrow-right" color="#666666" size="20rpx" /> -->
				</view>
			</view>
			<view class="productEdit_form_item flex flex-jc-sb flex-ai-c">
				<view>
					<text>商品状态</text>
				</view>
				<view>
					<!-- 开关组件 -->
					<u-switch :disabled="true" size="30" text="上架" closeText="下架" v-model="selectedList.status" :active-value="1"
						:inactive-value="0" active-color="#FCB527"></u-switch>
				</view>
			</view>
			<view class="productEdit_form_item flex flex-jc-sb flex-ai-c">
				<view>
					<text>商品货道</text>
				</view>
				<view>{{selectedList.channel_no}}</view>
				<!-- <view @click="skip(`/pages/equipment/cargoWay?id=52&device_no=${selectedList.device_no}&type=1`)">
					<text>{{selectedList.channel_no}}</text>
					<u-icon name="arrow-right" color="#666666" size="20rpx" />
				</view> -->
			</view>
			<view class="productEdit_form_item flex flex-jc-sb flex-ai-c">
				<view>
					<text>商品排序</text>
				</view>
				<view>
					<u-input :disabled="true" input-align="right" :border="false" v-model="selectedList.weight"
						placeholder="请输入"></u-input>
					<!-- <text>{{selectedList.weight}}</text> -->
					<!-- <u-icon name="arrow-right" color="#666666" size="20rpx" /> -->
				</view>
			</view>
			<view class="productEdit_form_item flex flex-jc-sb flex-ai-c">
				<view>
					<text>商品图片</text>
					<text>请上传商品图片（尺寸：500×500px</text>
				</view>
				<view @click="chooseImg">
					<i-icon icon="xiangji" size="100rpx" v-if="!tempFilePaths" />
					<u-image width="100rpx" height="100rpx" :src="domain_url" v-else></u-image>
				</view>
			</view>
			<view class="productEdit_form_item flex flex-jc-sb flex-ai-c">
				<view>
					<text>成本价格</text>
				</view>
				<view>
					<u-input :disabled="true" input-align="right" :border="false" v-model="selectedList.cost_price"
						placeholder="请输入"></u-input>
				</view>
			</view>
			<view class="productEdit_form_item flex flex-jc-sb flex-ai-c">
				<view>
					<text>销售价格</text>
				</view>
				<view>
					<u-input :disabled="!userType.includes(5)" input-align="right" :border="false" v-model="selectedList.sales_price"
						placeholder="请输入"></u-input>
				</view>
			</view>

		</view>

		<ButtonConfirm myTxt="保存" @click='editGoodsInfo'></ButtonConfirm>
		
		<u-picker closeOnClickOverlay @confirm="addrConfirm" @close="typeShow = false" @cancel="typeShow = false" :show="typeShow" :columns="listData" keyName="c_name"></u-picker>
	</view>
</template>

<script>
	import ButtonConfirm from '@/components/buttonConfirm.vue'
	import product from '@/api/product.js'
	import {
		mapState
	} from 'vuex'
	import common from '@/api/common.js';
	export default {
		components: {
			ButtonConfirm,
		},
		data() {
			return {
				userinfo: uni.getStorageSync('userinfo'),
				tempFilePaths: '',
				listData: [],
				typeShow: false,
				domain_url: '',
				userType: []
			};
		},
		computed: {
			...mapState({
				selectedList: state => state.selectedList,
			}),
		},
		// 
		onLoad() {
			this.tempFilePaths = this.selectedList.goods_main_image
			this.domain_url = this.selectedList.goods_main_image
			// this.getGoodsCate()
			this.userType = this.userinfo.account_type.split(",").map(item=>parseInt(item))
		},
		methods: {
			addrConfirm({value}) {
				const { id, c_name } = value[0]
				this.selectedList.category_id = id
				this.selectedList.category_name = c_name
				this.typeShow = false
			},
			//商品分类
			async getGoodsCate() {
				const res = await common.getGoodsCate()
				this.listData = [res.data]
			},
			async editGoodsInfo() {
				const {
					goods_title,
					status,
					channel_no,
					weight,
					goods_main_image,
					device_no,
					sales_price
				} = this.selectedList
				const res = await product.editGoodsInfo({
					goods_title,
					status,
					channel_no,
					weight,
					goods_main_image: this.tempFilePaths,
					device_no,
					sales_price
				})
				if(res.data.code === 200) {
					uni.navigateBack({
						delta: 1,
						success: () => {
							uni.showToast({
								title: '保存成功',
								icon: "none",
								success: () => {
									uni.navigateBack({
										delta: 1
									});
								}
							})
						}
					})
				}
			},
			skip(url) {
				uni.navigateTo({
					url: url
				})
			},
			async upload(file) {
				uni.showLoading()
				const res = await common.upload(file)
				uni.hideLoading()
				this.domain_url = res.data.domain_url
				// res.data.domain
				this.tempFilePaths = res.data.url
			},
			chooseImg() {
				return
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed', 'original'], //可以指定是原图还是压缩图，默认二者都有'original', 
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						// this.tempFilePaths = res.tempFilePaths[0]
						this.upload(res.tempFilePaths[0])
					}
				})
			},


		}
	}
</script>

<style>
	page {
		background: #F2F2F2;
	}
</style>
<style lang="scss" scoped>
	/deep/.u-input {
		padding: 0 !important;
		background-color: #fff !important;
	}

	.productEdit {
		&_form {
			background-color: #fff;
			padding: 0 40rpx;
			margin-top: 20rpx;
			margin-bottom: 80rpx;
			box-shadow: 0rpx 0rpx 16rpx 3rpx rgba(216, 216, 216, 0.5);

			&_item {
				padding: 30rpx 0;

				&:not(:last-child) {
					border-bottom: 1px solid #D8D8D8;
				}

				&>view:nth-child(1) {
					display: flex;
					flex-direction: column;

					&>text:nth-child(1) {
						font-size: 28rpx;
						font-weight: 400;
						color: #666666;
					}

					&>text:nth-child(2) {
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
						margin-top: 18rpx;
					}
				}

				&>view:nth-child(2) {
					display: flex;
					align-items: center;

					&>text:nth-child(1) {
						font-size: 28rpx;
						font-weight: 400;
						color: #333333;
					}
				}
			}
		}
	}
</style>